<script setup>
import EmptyData from '../../../components/emptyData.vue';
import { useStore } from 'vuex'
import empty from '@/assets/img/empty.png'
import { reactive, onMounted, onBeforeUnmount, computed, inject } from 'vue';
const store = useStore()
const api = store.state.api
// 跳转房间
const jumpRoom = inject('methods').jumpInterRoom
let rankList = reactive({
    result: {}
})
const getList = async () => {
    await api.cycle1rank({ cycle: 0 }).then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": [
        //             {
        //                 "ancPic": "http://qiqi-resource.qxiu.com/op/2018/01/12/95be0632928b41968691878801bf7299.jpg@style@s640",
        //                 "anchorId": 361675,
        //                 "anchorName": "1号主播",
        //                 "tickets": 0,
        //                 "success": 0,
        //                 "rankNo": 1,
        //                 "roomId": 0,
        //                 "scores": 0,
        //                 "showtype": 0,
        //                 "state": 0,
        //                 "timeStampe": 9223372036854776000
        //             }
        //         ],
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.result) rankList.result = res.data.result
    })
}
const rank = computed(() => {
    return rankList.result
})
let timer
onMounted(() => {
    getList()
    timer = setInterval(() => {
        getList()
    }, 30 * 1000);
})
onBeforeUnmount(() => {
    clearInterval(timer)
})
</script>

<template>
    <div class="riseRank">
        <ul class="rankList">
            <li v-if="rank.length > 0" v-for="(item, index) in rank" :key="index" :class="{ loser: item.rankNo > 10 }">
                <img v-if="item.state == 2" class="headImg toRoom" @click="jumpRoom(item.state, item.roomId, item.showtype)"
                    :src="item.ancPic || empty" alt="">
                <img v-else class="headImg" :src="item.ancPic || empty" alt="">
                <img v-if="item.state == 2" src="@/assets/img/ceremony/online.gif" alt="" class="online">
                <p>
                    <span class="name">{{ item.anchorName || '酷炫达人' }}</span>
                    <span>ID:{{ item.anchorId }}</span> 
                    <span>决战分&nbsp;&nbsp;{{ item.scores }}</span>
                </p>
                <i>{{ item.rankNo }}</i>
            </li>
            <EmptyData v-else />
        </ul>
    </div>
</template>

<style lang='scss' scoped></style>